<template>
  <div>
    <el-tabs v-model="activeTabs" @tab-click="tabChange" class="tabs fl">
      <el-tab-pane label="订单耗时" name="orderTime"></el-tab-pane>
      <el-tab-pane label="近5月完成订单" name="orderFiveMonths"></el-tab-pane>
    </el-tabs>
    <div class="search-wrap fr">
      <table-search
        v-if="search_show"
        ref="table-search"
        :selectHead="selectHead"
        @searchMethods="searchMethods"
      ></table-search>
    </div>
    <orderTimeTable
      ref="orderTimeTable"
      @totalChange="totalChange"
      :current_page="current_page"
      :per_page="per_page"
    ></orderTimeTable>
    <orderFiveMonths ref='orderFiveMonths'></orderFiveMonths>
    <pagination v-if="pageShow" @paginationChange="paginateChange" :total="total"></pagination>
  </div>
</template>

<script>
import tableSearch from "~/components/tableSearch";
import pagination from "~/components/pagination";
// 订单耗时
import orderTimeTable from "./components/order-time-Table.vue";
// 近5月案件统计
import orderFiveMonths from "./components/order-fiveMonths-Table"
export default {
  components: {
    tableSearch,
    pagination,
    orderTimeTable,
    orderFiveMonths
  },
  data() {
    return {
      activeTabs: "orderTime",
      search_show: true,
      selectHead: [
        {
          label: "订单编号",
          props: "order_number",
          is_show: true
        },
        {
          label: "代理人",
          props: "agent_id",
          is_show: true
        },
        {
          label: "流程人员",
          props: "process_id",
          is_show: true
        }
      ],
      pageShow: true,
      total: 0,
      per_page: 25,
      current_page: 1,
      search_params: {}
    };
  },
  methods: {
    totalChange(val) {
      this.total = val;
    },
    async tabChange() {
      await this.resetCondition
      if(this.activeTabs == "orderTime") {
        this.$refs['orderFiveMonths'].isShow = false
        this.$refs['orderTimeTable'].isShow = true
        this.pageShow = true
        this.$refs['orderTimeTable'].getTableData(this.search_params)
      } else if (this.activeTabs == "orderFiveMonths") {
        this.$refs['orderTimeTable'].isShow = false
        this.pageShow = false
        this.$refs['orderFiveMonths'].isShow = true
        this.$refs['orderFiveMonths'].getTableData(this.search_params)
      }
    },
    searchMethods(params, no_search) {
      this.resetCondition();
      this.search_params = params;
      if (!no_search) {
        if (this.activeTabs == "orderTime") {
          this.$nextTick(() => {
            this.$refs["orderTimeTable"].getTableData(this.search_params);
          });
        } else if (this.activeTabs == "orderFiveMonths") {
          this.$nextTick(() => {
            this.$refs["orderFiveMonths"].getTableData(this.search_params);
          })
        }
      }
    },
    resetCondition() {
      this.per_page = 25;
      this.current_page = 1;
      this.search_params = {};
    },
    paginateChange(params) {
      console.log(params);
      let args = {
        page: params.page,
        perPage: params.perPage
      };
      if (this.activeTabs == "orderTime") {
        this.$nextTick(() => {
          this.$refs["orderTimeTable"].getTableData(args);
        });
      }
    }
  },

  watch: {
    activeTabs: {
      handler: function(val) {
        if (val == "orderTime") {
          this.selectHead = [
            {
              label: "订单编号",
              props: "order_number",
              is_show: true
            },
            {
              label: "代理人",
              props: "agent_id",
              is_show: true
            },
            {
              label: "流程人员",
              props: "process_id",
              is_show: true
            }
          ];
        } else if (val == "orderFiveMonths") {
          this.selectHead = [
            {
              label: "时间选择(月)",
              props: "month"
            }
          ];
        }
      }
    }
  }
};
</script>

<style lang='less' type='text/css' scoped>
.agent-sum-wrap {
  margin-top: -10px;
  .tabs-wrap {
    .tabs {
      width: 100%;
    }
    .search-wrap {
      margin-top: -50px;
    }
  }
}
</style>
